<template>
  <div ref="echartsPie" class="echartsPie"></div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
//  按需引入 echarts
import * as echarts from 'echarts';
import 'echarts-gl';
const echartsPie = ref(); // 使用ref创建虚拟DOM引用，使用时用main.valued

let props = defineProps({
  options: Object,
  titleName: String,
});
let myChart = null;
onMounted(() => {
  window.addEventListener('resize', resizeChart);
});

function resizeChart() {
  if (myChart) {
    myChart.resize();
  }
}

watch(
  () => props.options,
  (newval, oldval) => {
    init(newval);
  },
  {
    deep: true,
  }
);

async function init(newval) {
  // 基于准备好的dom，初始化echarts实例
  if (!myChart) {
    myChart = echarts.init(echartsPie.value);
  }
  const seriesData1 = newval.ys;
  const xAxisList = newval.xAxis;
  // 传入数据生成 option
  const option = {
    legend: {
      show: false,
      textStyle: {
        color: '#6F87B1',
        fontSize: 16,
      },
      right: 10,
      top: 0,
      itemWidth: 18,
      itemHeight: 12,
      itemGap: 40,
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#2263BF',
      formatter: (p) => {
        let dom = `<div style="color:#fff">
        ${p[0].data}条
        </div>`;
        return dom;
      },
    },
    grid: {
      top: '15%',
      left: '8%',
      right: '0%',
      bottom: '15%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: xAxisList,

      axisLabel: {
        color: '#999999',
        fontSize: 16,
        interval: 0, // 确保显示所有标签
        rotate: 40, // 如果标签太多，可以旋转显示
      },
      axisLine: {
        lineStyle: {
          color: '#979797',
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      name: '',
      nameTextStyle: {
        color: '#333333',
        fontSize: 12,
        fontWeight: 'bold',
      },
      axisLabel: {
        color: '#999999',
        fontSize: 12,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#979797',
          opacity: 0.21,
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#979797'],
          opacity: 0.21,
          width: 1,
          type: 'dashed',
        },
      },
    },
    series: [
      {
        name: '',
        type: 'line',
        z: 1,
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize: 0,
        smooth: true,
        itemStyle: {
          color: '#2D9BFC',
        },
        lineStyle: {
          color: '#2D9BFC',
        },
        areaStyle: {
          //区域填充样式
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(25,163,223,.3)',
                },
                {
                  offset: 1,
                  color: 'rgba(25,163,223, 0)',
                },
              ],
              false
            ),
            shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
            shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          },
        },
        data: seriesData1,
      },
    ],
  };

  myChart.setOption(option);
}
</script>
<style scoped>
.echartsPie {
  width: 100%;
  height: 100%;
}
</style>
